<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%>

<html>

<head>
<title>Home</title>
<style type="text/css">
  .orders {
     border: 2px solid black; 
  }
  .ordersHeader {
     text-align: center;
     font-style: italic;
     color: Snow;
     background: Teal;
  }
  .oddRow {
     height: 25px;
     text-align: center;
     background: MediumTurquoise;
  }
  .evenRow {
     text-align: center;
     background: PowderBlue;
  }
  .dateColumn {
  	width: 200px;
  }
  .nameColumn {
  	width: 300px;
  }
  </style>
</head>
<f:view>
	<body>
	<h1><h:outputText value="Ochnas Volunteer Sign Up Web Site" /></h1>
<h:form id="homeForm">
	<hr />
	<h:panelGrid columns="6">
		<h:panelGroup>
		<h:outputText value="Welcome, " />
		<h:outputText value="#{loginController.user.firstName}" />
		<h:outputText value="." />
		</h:panelGroup>
		<h:outputText value="&nbsp;&nbsp;-&nbsp;&nbsp;" escape="false" />
		<h:commandLink action="#{homeController.home}">
   			<f:param value="#{loginController.user.id}" name="userId" />
			<h:outputText value="Home" />
		</h:commandLink>
		<h:commandLink action="#{myEventsController.listMyEvents}">
			<f:param value="#{loginController.user.id}" name="userId" />
			<h:outputText value="My Events" />
		</h:commandLink>
		<h:commandLink action="#{manageAccountController.manageAccount}">
			<f:param value="#{loginController.user.id}" name="userId" />
			<h:outputText value="My Account" />
		</h:commandLink>
				<h:commandLink action="#{loginController.logout}">
			<h:outputText value="Log Out" />
		</h:commandLink>
	</h:panelGrid>
	<hr />
	
	<h2>
		<h:panelGroup>
			<h:outputText value="All Future Events (" />
			<h:outputText value="#{homeController.size}" />
			<h:outputText value="):" />
			<h:commandLink action="#{homeController.home}" value="Refresh">
				<f:param value="#{loginController.user.id}" name="userId" />
			</h:commandLink>
		</h:panelGroup>
	</h2>

		<h:dataTable value="#{homeController.events}" var="event"
			styleClass="orders"
     		headerClass="ordersHeader"
     		columnClasses="dateClass,nameClass"
    	 	rowClasses="oddRow,evenRow">
			            <h:column>
                <f:facet name="header"><h:outputText value="Date" /> </f:facet>
                <h:outputText value="#{event.startDate}">
                	<f:convertDateTime pattern="MM/dd/yyyy"/>
                </h:outputText>
            </h:column>
            <h:column>
                <f:facet name="header"><h:outputText value="Name" /> </f:facet>
                <h:outputText value="#{event.name}" />
            </h:column>
            <h:column>
                <h:commandLink action="#{viewEventController.viewEventDetail}" value="View Detail">
                    <f:param value="#{event.id}" name="eventId" />
                    <f:param value="#{loginController.user.id}" name="userId" />
                </h:commandLink>
            </h:column>
		</h:dataTable>


	</h:form>
	</body>
</f:view>
</html>